<template>
    <div class="login">
<!--      <van-nav-bar @click-left="$router.push('/home/find')">-->
<!--        <template #left>-->
<!--          <i class="iconfont f44">&#xe637;</i>-->
<!--        </template>-->
<!--      </van-nav-bar>-->
      <nav-bar path="/home/find"></nav-bar>
      <h3 class="title">您好，请登录</h3>
      <van-form ref="form">
        <van-field placeholder="请输入手机号" name="mobile" v-model="form.mobile" :rules="rules.mobile">
          <template #left-icon>
            <i class="iconfont">&#xe60b;</i>
          </template>
        </van-field>
        <van-field placeholder="请输入验证码" v-model="form.code" :rules="rules.code">
          <template #left-icon>
            <i class="iconfont">&#xe60c;</i>
          </template>
          <template #button>
            <div class="code" v-if="totalTime === 5" @click="getCode">获取验证码</div>
            <div class="code" v-else>{{totalTime}}s</div>
          </template>
        </van-field>
      </van-form>
      <div class="protocol">登录即同意<span>《用户使用协议》</span>和<span>《隐私协议》</span></div>
      <van-button round color="#e40137" size="large" @click="submit">确定</van-button>
    </div>
</template>

<script>
import { auCode, auLogin } from '@/api/login.js'
import { setLocal, getLocal } from '@/utils/local'

export default {
  name: 'login',
  data () {
    return {
      totalTime: 5, // 倒计时验证码
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'onChange' },
          {
            validator: value => {
              return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)
            },
            message: '请输入正确的手机号!',
            trigger: 'onChange'
          }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'onChange' }
        ]
      }
    }
  },
  methods: {
    getCode () {
      this.$refs.form.validate('mobile').then(() => {
        this.totalTime--
        const _time = setInterval(() => {
          this.totalTime--
          if (this.totalTime <= 0) {
            this.totalTime = 5
            clearInterval(_time)
          }
        }, 1000)
        this.$toast.loading({
          duration: 0
        })
        auCode({ mobile: this.form.mobile }).then(res => {
          // console.log(res)
          this.$toast.success(res.data.data)
        })
      }).catch(() => { alert('失败') })
    },
    submit () {
      this.$refs.form.validate().then(() => {
        auLogin(this.form).then(res => {
          console.log(res)
          setLocal('token', res.data.data.jwt)
          this.$store.commit('setUserInfo', res.data.data.user)
          this.$store.commit('setIsLogin', true)
          // 路由接受穿过的参数 准备要去的页面
          const _redirect = this.$route.query.redirect
          // 如果页面存在
          if (_redirect) {
            // 跳到该页面
            this.$router.push(_redirect)
          } else {
            // 跳转至首页
            this.$router.push('/home')
          }
        }).catch(() => {
          // this.$toast.fail(error)
        })
      }).catch(() => { alert('失败') })
    }
  },
  created () {
    // 如果存在token就跳到home页
    if (getLocal('token')) {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
  .login{
    padding: @p15;
    .f44{
      font-size: 44px;
    }
    ::v-deep .van-nav-bar__left,
    ::v-deep .van-nav-bar__right{
      padding: 0;
    }
    ::v-deep .van-field__left-icon {
      margin:0 20px;
    }
    .title{
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      margin-left: 15px;
      margin-top: 50px;
      margin-bottom: 65px;
    }
    .code {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #00b8d4;
      line-height: 22px;
      letter-spacing: 0px;
    }
    .protocol{
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #181a39;
      line-height: 16px;
      letter-spacing: 0px;
      margin:15px 0 44px 15px;
      span {
        color: #00b8d4;
      }
    }
  }
</style>
